<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3伸缩布局</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: '微软雅黑';
			background-color: #F7F7F7;
		}

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.wrapper {
			width: 1024px;
			margin: 0 auto;
		}

		.wrapper > section {
			min-height: 300px;
			margin-bottom: 30px;
			box-shadow: 1px 1px 4px #DDD;
			background-color: #FFF;
		}

		.wrapper > header {
			text-align: center;
			line-height: 1;
			padding: 20px;
			margin-bottom: 10px;
			font-size: 30px;
		}

		.wrapper section > header {
			line-height: 1;
			padding: 10px;
			font-size: 22px;
			color: #333;
			background-color: #EEE;
		}

		.wrapper .wrap-box {
			padding: 20px;
		}

		.wrapper .brief {
			min-height: auto;
		}

		.wrapper .flex-img {
			width: 100%;
		}

		/*全局设置*/
		section ul {
			/*把所有ul指定成了伸缩盒子*/
			display: flex;
		}

		section li {
			width: 200px;
			height: 200px;
			text-align: center;
			line-height: 200px;
			margin: 10px;
			background-color: pink;
		}
		.nowrap ul{
			/*flex-wrap: nowrap;*/
			/*
				控制伸缩盒子里面的元素是否换行，默认是不换行
				wrap 换行


			*/
			/* flex-wrap: wrap;*/
			flex-wrap: wrap

		}

		.wrap ul{
			/*flex-wrap: wrap;*/
		}

		
	</style>
</head>
<body>
	<div class="wrapper">
		<header>CSS3-伸缩布局详解</header>
		<!-- 简介 -->
		<section class="brief">
			<header>flex-wrap</header>
			<div class="wrap-box">
				<p>控制是否换行，包括wrap、nowrap</p>
			</div>
		</section>
		<!-- 分隔线 -->
		<section class="nowrap">
			<header>nowrap</header>
			<div class="wrap-box">
				<p>不换行</p>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>5</li>
					<li>5</li>
					<li>5</li>
					<li>5</li>
					<li>5</li>
					<li>5</li>
				</ul>
			</div>
		</section>
		
		<section class="wrap">
			<header>wrap</header>
			<div class="wrap-box">
				<p>自动换行</p>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>
		</section>
	</div>
</body>
</html>